<template>
	<view class="category-container">
		<!-- 头部搜索 -->
		<view class="header">
			<view class="search-box" @click="goSearch">
				<image src="/static/images/search.png" />
				<input type="text" placeholder="搜索商品名称" />
			</view>
		</view>

		<!-- 内容 -->
		<view class="content">

			<!-- 分类 -->
			<view class="category">
				<view class="category-item" :class="item.isActive ? 'sel' : 'unsel'"
					v-for="(item, index) in categoryStore.categoryData" :key="item.id"
					@click="categoryStore.selectCategory(index,item.id)">
					<view class="item-text" :class="{'sel-text': item.isActive}">{{item.title}}</view>
				</view>
			</view>

			<!-- 商品列表 -->
			<view class="good-list">
				<view class="categoryImg">
					<image :src="categoryStore.categoryImg" />
				</view>

				<view class="good-item" v-for="(item,index) in categoryStore.categoryGoodListData" :key="item.id"
					@click="detailStore.goDetail(item.id)">
					<image :src="item.thumb_path" />
					<view class="text">
						<view class="title">{{item.title}}</view>
						<view class="price">
							<view class="newPrice">￥{{item.sell_price}}.00</view>
							<view class="oldPrice">￥{{item.market_price}}</view>
						</view>
					</view>
				</view>

				<view class="empty" v-if="!categoryStore.categoryGoodListData.length">
					<image src="/static/images/zwsp.png" />
					<view class="empty-text">
						暂无商品
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useCategoryStore,
		useDetailStore
	} from '../../stores/store.js'

	const categoryStore = useCategoryStore()
	const detailStore = useDetailStore()

	onLoad(() => {
		categoryStore.getCategoryData().then(() => {
			let category_id = categoryStore.categoryData[0].id
			categoryStore.getCategoryGoodListData(category_id)
			categoryStore.selectCategory(0, category_id)
		})

	})

	const goSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search',
		})
	}
</script>

<style lang="scss" scoped>
	.unsel {
		background-color: #f2f3f5;
	}

	.sel {
		background-color: #fff;
	}

	.sel-text {
		border-left: 3px solid #ee0a24;
	}

	.category-container {

		/* 头部搜索 */
		.header {
			height: px2rpx(54);
			width: px2rpx(375);
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;

			.search-box {
				height: px2rpx(35);
				width: 95%;
				display: flex;
				align-items: center;
				background-color: #f7f8fa;

				image {
					height: px2rpx(24);
					width: px2rpx(24);
					margin-left: px2rpx(7);
				}

			}
		}

		// 内容
		.content {
			display: flex;

			.category {
				height: 100vh;
				width: px2rpx(80);

				.category-item {
					height: px2rpx(60);
					width: px2rpx(80);
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: px2rpx(14);
					color: #323233;

					.item-text {
						width: px2rpx(80);
						text-align: center;
					}
				}
			}

			.good-list {
				width: px2rpx(295);

				.categoryImg {
					display: flex;
					justify-content: center;

					image {
						width: px2rpx(255);
						height: px2rpx(76);
					}

				}

				.good-item {
					width: px2rpx(295);
					height: px2rpx(104);
					margin: px2rpx(8) px2rpx(16);
					display: flex;

					image {
						width: px2rpx(88);
						height: px2rpx(88);
						margin-right: px2rpx(10);
						// object-fit: contain;
						overflow-clip-margin: content-box;
						overflow: clip;
					}

					.text {
						width: px2rpx(167);
						height: px2rpx(88);
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.title {
							width: px2rpx(167);
							height: px2rpx(32);
							font-size: px2rpx(12);
							color: #323233;
						}

						.price {
							width: px2rpx(167);
							height: px2rpx(22);
							display: flex;
							align-items: flex-end;

							.newPrice {
								font-size: px2rpx(16);
								color: #ff6000;
							}

							.oldPrice {
								font-size: px2rpx(10);
								color: #969799;
								margin-left: px2rpx(10);
								text-decoration: line-through
							}
						}

					}
				}

				.empty {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: px2rpx(160);
						height: px2rpx(160);
					}

					.empty-text {
						font-size: px2rpx(14);
						color: #969799;
					}
				}
			}
		}
	}
</style>